<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>兼职招聘系统-用户信息</title>
<link rel="shortcut icon" href="../../images/copylogo.png"
	type="image/x-icon" />
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/main.css">
 <link rel="stylesheet" href="../../css/reset.css">
 <link rel="stylesheet" href="../../css/goods.css">
</head>
<body>
	<div id = "position_info">
	<div id="table" class="mt10">
		<div class="box span10 oh">
			<form action="../../files/txfileUpload" class="jqtransform" id="addMenberForm" method="post" enctype="multipart/form-data">
			<table width="100%" border="0" cellpadding="0" cellspacing="0" class="list_table">
				<thead>
					<tr>
						<th>职位编号</th>
						<th>职位名称</th>
						<th>所属公司</th>
						<th>职位类型</th>
						<th>职位薪资</th>
						<th width="18%">职位介绍</th>
						<th>职位地点</th>
						<th width="18%">职位要求</th>
						<th>职位创建时间</th>
					</tr>
				</thead>

				<tbody align="center">
					<tr v-for="p in positions">
							<td>{{p.pno}}</td>
							<td>{{p.pname}}</td>
							<td>{{p.companyname}}</td>
							<td>{{p.tname}}</td>
							<td>{{p.price}}</td>
							<td>{{p.intro}}</td>
							<td>{{p.place}}</td>
							<td>{{p.descr}}</td>
							<td>{{p.pdate}}</td>
						</tr>
				</tbody>
				
			</table>
				</form>
			<div class="page mt10">
				 <!-- 分页栏-->
				<div class="pagenation">
					<ul>
						<li><a @click="findByPage(1,pageSize)">首页</a></li>
						<li v-for="tp in totalPage"><a @click="findByPage(tp,pageSize)" :class={"active":tp==pageNo}>{{tp}}</a></li>
						<li><a @click="findByPage(totalPage,pageSize)">尾页</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	</div>
<script type="text/javascript" src="../js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="../js/showpic.js"></script>
<script type="text/javascript" src="../js/ajaxfileupload.js"></script>
<script src="../../ckeditor/ckeditor.js"></script>
<script src="../js/jQuery.form.js"></script>
<script type="text/javascript" src="../../js/qs.js"></script>
<script type="text/javascript" src="../../js/vue.js"></script>
<script type="text/javascript" src="../../js/axios.js"></script>
<script type="text/javascript">

$(function(){

})
	

let app = new Vue({
			el:"#position_info",
			data:{
				positions:{},
				 pageNo: 1,		//当前页数
				 pageSize: 5,	//每页显示几条
				 totalSize: 0,	//总共多少条数据
				 totalPage : 0,	//总页数
			},
			methods:{
				findByPage : function(pageNo, pageSize){
					//调用分页查找函数
					axios.get("../../admin/findPositionsByPage", {params:{pageNo:pageNo, pageSize:pageSize}}).then(result =>{
						this.positions = result.data.positions;
						this.pageNo = pageNo;
						console.log(result.data.positions);
						console.log("当前是第" +this.pageNo+ "页");
					})
				},
			},
			mounted:function(){
				//调用初始化的查找函数,先查出总页数
				axios.get("../../admin/findTotalPositions", {params:{}}).then(result =>{
					if(result.data.positions == 0){
						console.log("没有找到职位信息");
					}else{
						this.totalSize = Object.keys(result.data.positions).length;
						this.totalPage = Math.ceil(this.totalSize / this.pageSize);
						console.log(result.data.positions);
						console.log("找全部,共："+this.totalSize +"条信息---总页数："+ this.totalPage);
					}					
				})
				//然后显示第一页的数据
				this.findByPage(1,this.pageSize)
			}
		})




</script>
</body>
</html>